.example-9 .single {
  display: inline-block;
  border-radius: 50%;
  line-height: 50px;
  background: #58a;
}
.example-9 .half {
  width: 100px;
  line-height: 50px;
  border-radius: 50% / 100% 100% 0 0;
  background: red;
}
.example-9 .quarter {
  width: 100px;
  line-height: 50px;
  border-radius: 100% 0 0 0;
  background: #abc;
}

.example-10 .multiple {
  display: inline-block;
  padding: 10px 20px;
  transform: skewX(-45deg);
  color: #fff;
  background: red;
}
.example-10 .multiple div {
  transform: skewX(45deg);
}

.example-10 .pseudo {
  position: relative;
  padding: 10px 20px;  
}
.example-10 .pseudo::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  background: #58a;
  transform: skewX(45deg)
}

.example-11 .picture {
  width: 400px;
  height: 400px;
  transform: rotate(45deg);
  overflow: hidden;
}
.example-11 .picture img {
  max-width: 100%;
  transform: rotate(-45deg) scale(1.6);
}
.example-11 .clip {
  width: 400px;
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  transition: 1s clip-path;
}
.example-11 .clip:hover {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

.example-12 .gradient {
  text-align: center;
  height: 50px;
  color: #fff;
  background: #58a;
  background: radial-gradient(circle at top left, transparent 15px, #58a 0) top left,
      radial-gradient(circle at top right, transparent 15px, #58a 0) top right,
      radial-gradient(circle at bottom left, transparent 15px, #58a 0) bottom left,
      radial-gradient(circle at bottom right, transparent 15px, #58a 0) bottom right;
  background-size: 52% 50%;
  background-repeat: no-repeat;
}
.example-12 .svg {
  margin-top: 20px;
  border: 15px solid transparent;
  border-image: 1 url('data:image/svg+xml,\
  <svg xmlns="http://www.w3.org/2000/svg" width="3" height="3" fill="%2358a">\
    <polygon points="0,1 1,0 2,0 3,1 3,2 2,3 1,3 0,2" />\
  </svg>');
  background: #58a;
  background-clip: padding-box;
}
.example-12 .clip {
  margin-top: 20px;
  height: 60px;
  background: #58a;
  clip-path: polygon(20px 0, calc(100% - 20px) 0, 100% 20px, 100% calc(100% - 20px),
      calc(100% - 20px) 100%, 20px 100%, 0 calc(100% - 20px), 0 20px);
}

.example-13 .tab {
  position: relative;
  display: inline-block;
  padding: .5em 3em .35em 1em;
  color: #fff;
}
.example-13 .tab::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: -1;
  border-radius: 6px;
  background: red;
  transform: scaleY(1.3) perspective(.5em) rotateX(5deg);
  transform-origin: bottom left;
}

.example-14 .pie {
  position: relative;
  width: 100px;
  line-height: 100px;
  border-radius: 50%;
  background: yellowgreen;
  background-image: linear-gradient(to right, transparent 50%, #655 0);
  color: transparent;
  text-align: center;
}
@keyframes spin{
  to {
    transform: rotate(.5turn);
  }
}
@keyframes bg {
  50% {
    background: #655
  }
}
.example-14 .pie::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 50%;
  height: 100%;
  border-radius: 0 100% 100% 0 / 50%;
  background-color: inherit;
  transform-origin: left;
  animation: spin 50s linear infinite,
      bg 100s step-end infinite;
  animation-play-state: paused;
  animation-delay: inherit;
}

.example-14 svg {
  height: 100px;
  width: 100px;
  transform: rotate(-90deg);
  background: yellowgreen;
  border-radius: 50%;
}
.example-14 circle {
  fill: yellowgreen;
  stroke: #655;
  stroke-width: 32;
  stroke-dasharray: 50 100;
}
